<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>周迎川的Web期末大作业</title>
  <!-- MDB icon -->
  <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- Material Design Bootstrap -->
  <link rel="stylesheet" href="css/mdb.min.css">
  <!-- Your custom styles (optional) -->
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <!-- Start your project here-->
  <!-- Main navigation -->
  <header id="home">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
      <div class="container">
        <a class="navbar-brand" href="index.html">我的教育经历</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
          aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="#home">Home
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="primary.html">小学</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="junior.html">初中</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="senior.html">高中</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="senior4.html">高四</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="university.html">大学</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="ending.html">Ending</a>
            </li>
          </ul>
          <!-- Social Icon  -->
          <ul class="navbar-nav nav-flex-icons">
            <li class="nav-item">
              <a class="nav-link">
                <i class="fab fa-facebook-f light-green-text-2"></i>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link">
                <i class="fab fa-twitter light-green-text-2"></i>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link">
                <i class="fab fa-instagram light-green-text-2"></i>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- Navbar -->
    <!-- Full Page Intro -->
    <div class="view">
      <video class="video-intro" poster="https://mdbootstrap.com/img/Photos/Others/background.jpg" playsinline autoplay
        muted loop>
        <source src="https://mdbootstrap.com/img/video/animation.mp4" type="video/mp4">
      </video>
      <!-- Mask & flexbox options-->
      <div class="mask rgba-gradient d-flex justify-content-center align-items-center">
        <!-- Content -->
        <div class="container px-md-3 px-sm-0">
          <!--Grid row-->
          <div class="row wow fadeIn">
            <!--Grid column-->
            <div class="col-md-12 mb-4 white-text text-center wow fadeIn">
              <h3 class="display-3 font-weight-bold white-text mb-0 pt-md-5 pt-5">学习</h3>
              <hr class="hr-light my-4 w-75">
              <h4 class="subtext-header mt-2 mb-4">不应该复杂和痛苦，而应简单和快乐！&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                ------棋歌</h4>

              <a href="#about" data-offset="90" class="btn btn-rounded btn-outline-white smooth-scroll">
                <i class="fas fa-home "></i> Visit me
              </a>
            </div>
            <!--Grid column-->
          </div>
          <!--Grid row-->
        </div>
        <!-- Content -->
      </div>
      <!-- Mask & flexbox options-->
    </div>
    <!-- Full Page Intro -->
  </header>
  <!--Main layout-->
  <!-- main -->
  <main>
    <div class="container" id="about">

      <!--Grid row 1-->
      <div class="row" style="margin-top: 20px;">

        <!--Grid column-->
        <div class="col-lg-4 col-md-12">

          <!--Card-->
          <div class="card">

            <!--Card image-->
            <div class="view overlay">
              <img src="./img/myimg/xx/xx4.jpg" class="card-img-top" alt="">
              <a href="#">
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>

            <!--Card content-->
            <div class="card-body">
              <!--Title-->
              <h4 class="card-title">小学</h4>
              <!--Text-->
              <p class="card-text">余则缊袍敝衣处其间，略无慕艳意。以中有足乐者，不知口体之奉不若人也。</p>
              <a href="primary.html" class="btn btn-purple">visit</a>
            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-6">

          <!--Card-->
          <div class="card">

            <!--Card image-->
            <div class="view overlay">
              <img src="./img/myimg/cz/cz20.jpg" class="card-img-top" alt="">
              <a href="#">
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>

            <!--Card content-->
            <div class="card-body">
              <!--Title-->
              <h4 class="card-title">初中</h4>
              <!--Text-->
              <p class="card-text">形象高于一切，学习只是一时热血。喜欢简单的人，也喜欢简单的事。</p>
              <a href="junior.html" class="btn btn-purple">visit</a>
            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-6">

          <!--Card-->
          <div class="card">

            <!--Card image-->
            <div class="view overlay">
              <img src="./img/myimg/gz/gz31.jpg" class="card-img-top" alt="">
              <a href="#">
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>

            <!--Card content-->
            <div class="card-body">
              <!--Title-->
              <h4 class="card-title">高中</h4>
              <!--Text-->
              <p class="card-text">世界上最近的距离：放假到开学；世界上最远的距离：开学到放假。</p>
              <a href="senior.html" class="btn btn-purple">visit</a>
            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

      </div>


      <!--Grid row 2-->
      <div class="row" style="margin-top: 20px;">

        <!--Grid column-->
        <div class="col-lg-4 col-md-12">

          <!--Card-->
          <div class="card">

            <!--Card image-->
            <div class="view overlay">
              <img src="./img/myimg/gz4/gz430.jpg" class="card-img-top" alt="">
              <a href="#">
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>

            <!--Card content-->
            <div class="card-body">
              <!--Title-->
              <h4 class="card-title">高四</h4>
              <!--Text-->
              <p class="card-text">谁的青春不迷茫？我的也不列外。</p>
              <a href="senior4.html" class="btn btn-purple">visit</a>
            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-6">

          <!--Card-->
          <div class="card">

            <!--Card image-->
            <div class="view overlay">
              <img src="./img/myimg/dx/dx27.jpg" class="card-img-top" alt="">
              <a href="#">
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>

            <!--Card content-->
            <div class="card-body">
              <!--Title-->
              <h4 class="card-title">大学</h4>
              <!--Text-->
              <p class="card-text">还是从前那个少年，只是逐渐成熟罢了。</p>
              <a href="university.html" class="btn btn-purple">visit</a>
            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-6">

          <!--Card-->
          <div class="card">

            <!--Card image-->
            <div class="view overlay">
              <img src="./img/myimg/end1.webp" class="card-img-top" alt="">
              <img src="./img/myimg/end.gif" class="card-img-top" alt="">
              <a href="#">
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>

            <!--Card content-->
            <div class="card-body">
              <!--Title-->
              <h4 class="card-title">结业报告</h4>
              <!--Text-->
              <p class="card-text"></p>
              <a href="ending.html" class="btn btn-purple">visit</a>
            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

      </div>


    </div>

  </main>
  <!-- main -->

  <!-- Footer -->
  <footer class="page-footer font-small pt-4 " style="background-color: #563e91">

    <!-- Footer Elements -->
    <div class="container">

      <!-- Social buttons -->
      <ul class="list-unstyled list-inline text-center">
        <li class="list-inline-item">
          <a class="btn-floating btn-fb mx-1">
            <i class="fab fa-facebook-f"> </i>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn-floating btn-tw mx-1">
            <i class="fab fa-twitter"> </i>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn-floating btn-gplus mx-1">
            <i class="fab fa-google-plus-g"> </i>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn-floating btn-li mx-1">
            <i class="fab fa-linkedin-in"> </i>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn-floating btn-dribbble mx-1">
            <i class="fab fa-dribbble"> </i>
          </a>
        </li>
      </ul>
      <!-- Social buttons -->

    </div>
    <!-- Footer Elements -->

    <!-- Copyright -->
    <div class="footer-copyright text-center py-3">© 2018 Copyright:
      <a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
    </div>
    <!-- Copyright -->

  </footer>
  <!-- Footer -->
  <!-- End your project here-->

  <!-- jQuery -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="js/mdb.min.js"></script>
  <!-- Your custom scripts (optional) -->
  <script type="text/javascript"></script>

</body>

</html>